<template>
  <div class="editor">
    <mavon-editor
      v-model="value"
      @imgAdd="uploadImg"
      @change="change"
      ref="md"
    ></mavon-editor>
    <!-- 
    <div class="content markdown-body" v-highlight v-html="html">
      {{ html }}
    </div>
    -->
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import { upload } from '@/api/oss'
/*
import hljs from 'highlight.js' // 导入
import 'highlight.js/styles/atom-one-dark.css' // 设置样式
*/
export default {
  data() {
    return {
      value: '请输入内容',
      html: ''
    }
  },
  components: {
    mavonEditor
  },
  methods: {
    uploadImg(pos, file) {
      console.log(file)
      upload(file.name, file).then(res => {
        //使用服务器返回的图片地址替换原图片地址
        this.$refs.md.$imglst2Url([[pos, res]])
      })
      /*
      var formData = new FormData()
      formData.append('image', file)
      this.$axios({
        url: '文件服务器地址',
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(url => {
        //使用服务器返回的图片地址替换原图片地址
        $vm.$img2Url(pos, url)
      })
      */
    },
    change(value, render) {
      // render 为 markdown 解析后的结果[html]
      this.html = render
      this.$emit('content', this.html)
      console.log(this.html)
    }
  }
}
</script>

<style lang="scss" scoped>
//默认下预览区域的字体比较小，我们可以通过v-note-show来设置字体大小，这里我设置为24px
.v-note-show {
  font-size: 24px;
}
</style>
